<script lang="jsx" setup>
import { ref, watch } from 'vue';
import * as echarts from 'echarts';
import { useEcharts } from '@/hooks/common/echarts';

const props = defineProps({
  chartData: {
    type: Array,
    default: () => []
  }
});

const searchParams = defineModel('searchParams', { required: true });

const chartData = ref(props.chartData);

const temperatureOptions = ref({
  title: {
    text: `${searchParams.value.warehouse}湿度趋势图`
  },
  tooltip: {
    trigger: 'axis',
    formatter(params) {
      let tooltip = `时间：${params[0].axisValue}<br>`; // 假设 x 轴数据在第一个参数中
      params.forEach(param => {
        if (param.seriesName === '湿度' && param.value) {
          tooltip += `湿度: ${param.value}%<br>`;
        }
      });
      return tooltip;
    }
  },
  legend: {
    data: ['湿度', '预警上限', '预警下限', '管控上限', '管控下限']
  },
  xAxis: {
    type: 'category',
    data: ['01:00', '05:00', '09:00', '13:00', '17:00', '21:00']

    // data: xAxisData,
  },

  yAxis: [
    {
      type: 'value',
      name: '湿度(%)',
      axisLabel: {
        formatter: '{value} %'
      },
      min: () => {
        return 0;
      },
      max: () => {
        return chartData.value?.[2]?.cmaxh ? chartData.value?.[2]?.cmaxh + 1 : 24;
      }
    }
  ],
  series: [
    {
      name: '湿度',
      type: 'line',
      stack: 'Total',
      data: [],
      lineStyle: {
        normal: {
          type: 'solid',
          color: 'rgb(55,162,218)'
        }
      }
    },

    {
      name: '预警上限',
      type: 'line',
      show: false,
      data: [], // 这里填入您的预警上限数据
      lineStyle: {
        normal: {
          type: 'solid',
          color: '#FFA500'
        }
      }
    },
    {
      name: '预警下限',
      type: 'line',
      show: false,
      data: [], // 这里填入您的预警下限数据
      lineStyle: {
        normal: {
          type: 'solid',
          color: '#FFA500'
        }
      }
    },
    {
      name: '管控上限',
      type: 'line',
      show: false,
      data: [], // 这里填入您的预警上限数据
      lineStyle: {
        normal: {
          type: 'solid',
          color: 'red'
        }
      }
    },
    {
      name: '管控下限',
      type: 'line',
      show: false,
      data: [], // 这里填入您的预警下限数据
      lineStyle: {
        normal: {
          type: 'solid',
          color: 'red'
        }
      }
    }
  ],
  backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#e0f3ff' }, // 背景渐变起始颜色
    { offset: 1, color: '#80b8ff' } // 背景渐变结束颜色
  ])
});
const { domRef, updateOptions } = useEcharts(() => temperatureOptions.value, false);

watch(
  () => props.chartData,
  val => {
    chartData.value = val;
    console.log(val);

    if (val.length) {
      initData(val);
    }
  },
  {
    deep: true,
    immediate: true
  }
);

function initData(val) {
  updateOptions(opts => {
    opts.xAxis.data = ['01:00', '05:00', '09:00', '13:00', '17:00', '21:00'];
    opts.yAxis[0].max = () => val[2].cmaxh + 1;
    opts.series[0].data = val[1];
    // opts.series[0].data = [50.9, 48.9, 47.9, 49.6, null, null]; // 温度线
    opts.series[1].data = [val[2].maxh, val[2].maxh, val[2].maxh, val[2].maxh, val[2].maxh, val[2].maxh];
    opts.series[2].data = [val[2].minh, val[2].minh, val[2].minh, val[2].minh, val[2].minh, val[2].minh];
    opts.series[3].data = [val[2].cmaxh, val[2].cmaxh, val[2].cmaxh, val[2].cmaxh, val[2].cmaxh, val[2].cmaxh];
    opts.series[4].data = [val[2].cminh, val[2].cminh, val[2].cminh, val[2].cminh, val[2].cminh, val[2].cminh];
    return opts;
  });
}
</script>

<template>
  <div ref="domRef"></div>
</template>

<style lang="scss" scoped></style>
